<template>
  <div class="layout">
    <!-- 面包屑导航区域 -->
    <div class="breadcrumb">
      <ul style="margin-left:8%">
        <li style="text-decoration:none;color:rgba(51, 51, 51, 0.926);font-weight:bold;"
             v-for="(crumb, index) in breadcrumbs" :key="index">
          <router-link style="text-decoration: none; color: inherit;" v-if="index !== breadcrumbs.length - 1" :to="crumb.path">{{ crumb.label }}</router-link>
          <span v-else>{{ crumb.label }}</span>
        </li>
      </ul>
    </div>

    <!-- 主体布局部分：侧边栏 + 主要内容 -->
    <div class="content-wrapper">
      <TeacherSidebar 
        :username="username" 
        :userAvatar="userAvatar" 
        :loginTime="loginTime" 
      /> <!-- 教师端的侧边栏 -->

      <!-- 主要内容部分 -->
      <div class="main-content">
        <router-view /> <!-- 渲染子页面的内容 -->
      </div>
    </div>
  </div>
</template>

<script>
import TeacherSidebar from '@/components/TeacherSidebar.vue';

export default {
  name: 'TeacherLayout',
  components: {
    TeacherSidebar
  },
  props: {
    username: {
      type: String,
      required: true
    },
    userAvatar: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loginTime: new Date().toLocaleString(), // 登录时间
    };
  },
  computed: {
    breadcrumbs() {
      // 根据当前路由动态生成面包屑
      return this.$route.matched.map(route => ({
        path: route.path,
        label: route.meta.breadcrumb || route.name
      }));
    }
  }
};
</script>

<style scoped>
.layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F2F2F2;
}
/* 面包屑导航单独占一行 */
.breadcrumb {
  background-color: #f8f9fa;
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.breadcrumb ul {
  list-style: none;
  display: flex;
  gap: 5px;
}

.breadcrumb li::after {
  content: " / ";
  margin-left: 5px;
  text-decoration: none;
}

.breadcrumb li:last-child::after {
  content: "";
  text-decoration: none;
}

/* 主体布局部分 */
.content-wrapper {
  display: flex;
  flex-grow: 1;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 60px;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: white;
  border-radius: 10px;
  margin-left: 20px;
  
}
</style>
